<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="StApi,接口管理，低代码" name="keywords"/>
    <meta content="神土" name="description"/>
    <meta contect="fuzl" name="author"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>管理平台</title>
</head>

<!--页面专属css-->
<!--共用css-->
<link href="/public/element/index.css" rel="stylesheet"/>
<script src="/public/vue.global.prod.js"></script>
<script src="/public/vue-router.global.prod.js"></script>
<script src="/public/vue3-sfc-loader.js"></script>
<script src="/public/element/index.full.js"></script>
<script src="/public/element/zh-cn.js"></script>
<script src="/public/element/index.iife.min.js"></script>
<script src="/public/axios.min.js"></script>
<script src="/public/axios.config.js"></script>
<script src="/public/loadVue.js"></script>
<script src="/public/icons.js"></script>
<!--共用css-->
<body>
<div id="app">
        <el-container style="height: 100%">
            <el-header class="work-header">
                <el-row style="margin-top: 5px">
                    <el-col :span="22">
                        <el-image style="height: 40px" src="/public/images/logo.png"/>
                    </el-col>
                    <el-col :span="2" style="text-align: right">
                        <div class="demo-type">
                            <div>
                                <el-avatar src="/public/images/avatar.png"/>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu style="width: 100%;height: 100%"
                        :default-active="activeMenu"
                        class="el-menu-vertical-demo"
                        @select="handleSelect">
                        <template v-for="(crumb, index) in routes" :key="index">
                        <el-menu-item :index="index">
                            <component class="icon" :is="crumb.icon"></component>
                            <span>{{crumb.name}}</span>
                        </el-menu-item>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main style="display: flex;flex-direction: column;">
                    <breadcrumb></breadcrumb>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
</div>
</body>
<script>
    const {createApp, ref,reactive,onMounted,toRefs,computed,watch,nextTick } = Vue;
    const {createRouter, createWebHistory,useRoute,useRouter} = VueRouter;
    const routes = [
        { path: '/datasource', component: loadVue('./view/datasource/index.vue'),name: '数据源',icon:'message-box'  },
        { path: '/user', component: loadVue('./view/main.vue'),name: '用户管理' ,icon:'user-filled' },
        { path: '/role', component: loadVue('./view/role/index.vue'),name: '角色管理' ,icon:'user' },
        { path: '/apis', component: loadVue('./view/apis/index.vue'),name: '接口管理' ,icon:'share' },
        { path: '/module', component: loadVue('./view/module/index.vue'),name: '模块管理' ,icon:'fold' }
    ]
    const router = createRouter({
        history: createWebHistory(),
        routes
    })
    const app = createApp({
        setup(props,context) {
            const handleSelect =(index, indexPath)=>{
                router.push(routes[index].path)
            }
            const router = useRouter();
            const activeMenu = ref(0)
            watch(() => router.currentRoute.value, (newValue, oldValue) => {
                const index = routes.findIndex((item)=>{
                    return item.path==newValue.path
                })
                activeMenu.value = index;
            });

            return {routes,handleSelect,activeMenu}
        }
    })
    .use(router)
    .use(ElementPlus);
    app.component("breadcrumb",loadVue('./component/breadcrumb.vue'));
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component("Menu"==key?"icon-menu":key, component)
    }

    app.mount('#app');

</script>
<style>

    html, body, #app {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .work-header{
        height:60px;
    }
    .page-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 20px 20px 0px 20px;
    }
    .el-pagination {
        margin: auto auto 10px auto;

    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 160px;
        min-height: 400px;
    }
    .icon{
        width:18px;
        height: 18px;
        margin-right: 5px;
    }

     .el-breadcrumb {
         font-size: 16px;
         border-top: #f0f0f0 solid 1px;
         background-color: #fafafa;
         padding: 10px 0 10px 10px;
         box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
     }

    .el-breadcrumb__item {
        color: #409EFF;
    }

    .el-breadcrumb__separator {
        color: #606266;
    }
    .el-main {
        padding: 0px !important;
    }
    html.dark .svg-icon,
    html.dark svg {
        fill: var(--el-text-color-regular);
    }
</style>
</html>